<script>
import {
  defineComponent,
  reactive,
  toRefs, watch
} from 'vue'

export default defineComponent({
  name: 'ConfigUpload',
  props: {
    width: {
      type: Number,
      default: 340
    },
    value: {
      type: String,
      default: ''
    }
  },
  setup(props, {emit}) {
    const state = reactive({
      currentData: ''
    })

    watch(() => props.value, (e) => {
      state.currentData = e
    })

    watch(() => state.currentData, (e) => {
      emit('update:value', e)
    })

    return {
      ...toRefs(state)
    }
  }
})
</script>

<template>
  <div class="component-config-upload-container">
    <div :style="{ width: `${width}px` }" class="config-upload-input-bound">
      <input v-model="currentData" class="input" readonly />
    </div>
    <div class="browse-button">浏览</div>
    <div class="directory-button">打开文件夹</div>

  </div>
</template>

<style lang="scss">
.component-config-upload-container {
  height: 28px;
  display: flex;
  align-items: center;

  .config-upload-input-bound {
    border: 1px solid #A0A0A0;
    height: 100%;
    padding: 0 12px;
    background-color: #fff;

    .input {
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      background: none;
    }
  }

  .browse-button {
    width: 80px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #EFC400;
    color: #ffffff;
    font-size: 14px;
    margin-left: 12px;
    user-select: none;
    cursor: pointer;
  }

  .directory-button {
    width: 120px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1890FF;
    color: #ffffff;
    font-size: 14px;
    margin-left: 12px;
    user-select: none;
    cursor: pointer;
  }
}
</style>
